<template>
	<div class="container wrap-con">
		<div class="fontWeightStyle">1.测评工具：</div>
		<div class="textIndetStyle">
			症状自评量表（SCL-90）
		</div>
			<div class="fontWeightStyle">2.测评时间：</div>
		<div class="textIndetStyle">
			{{ form.appraisalFinishDate }}
		</div>
		<!-- <div><span class="fontWeightStyle">1.测评工具：</span><span>症状自评量表（SCL-90）</span></div>
		<div><span class="fontWeightStyle">2.测评时间：</span>{{ form.appraisalFinishDate }}</div> -->
		<div class="fontWeightStyle">3.SCL-90简介：</div>
		<div class="textIndetStyle">
			SCL-90是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表。该量表由德若伽提斯(L.R.Derogatis)于1975年编制。该量表共有90个项目，包含有较广泛的精神病症状学内容，从感觉、情感、思维、意识、行为直至生活习惯、人际关系、饮食睡眠等多种角度，评定一个人是否有某种心理症状及其严重程度如何。该量表对有心理症状(即有可能处于心理障碍或心理障碍边缘)的人有良好的区分能力。适用于测查某人群中哪些人可能有心理障碍，可能有何种心理障碍及其严重程度如何。不适合于躁狂症和精神分裂症。本测验不仅可以自我测查，也可以对他人（如其行为异常，有患精神或心理疾病的可能）进行核查，假如发现得分较高，则应进一步筛查。
		</div>
		<div class="fontWeightStyle">4.量表十大因子</div>
		<div>该量表从以下10个方面进行考察：</div> 
		<div class="textIndetStyle"><span class="fontWeightStyle">4.1.躯体化：</span><span>主要反映身体不适感，包括心血管、胃肠道、呼吸和其他系统的不适，和头痛、背痛、肌肉酸痛，以及焦虑等躯体不适表现。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.2强迫症状：</span><span>指那些明知没有必要，但又无法摆脱的无意义的思想、冲动和行为。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.3人际关系敏感：</span><span>指人际交往中的不自在与自卑感。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.4抑郁：</span><span>心境苦闷，兴趣减退，动力缺乏，活力丧失。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.5焦虑：</span><span>指烦躁、坐立不安、神经过敏，紧张以及由此产生的躯体征象。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.6敌对：</span><span>指在思想、感情及行为上反应的敌对表现。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.7恐怖：</span><span>指对包括出门旅行、空旷场地、人群、公共场所、交通工具、社交等方面过度惊恐的表现。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.8偏执：</span><span>主要指投射性思维、敌对、猜疑、妄想、被动体验、夸大等。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.9精神病性：</span><span>反映急性症状和行为，即限定不严的精神病性过程的症状表现。</span></div>
		<div class="textIndetStyle"><span class="fontWeightStyle">4.10其他：</span><span>该因子是反应睡眠及饮食情况的。</span></div>
		<div class="fontWeightStyle">5.测评结果数据</div>
		<div class="textIndetStyle" style="color: #000;">5.1 总分正常范围：≤160分</div>
		<div class="textIndetStyle" style="color: #000;">5.2 总分测评得分：{{ form.appraisalScore }}分</div>
		<div class="textIndetStyle" style="color: #000;">5.3 因子分：</div>
		<div class="table">
			<div class="" v-for="item in showData">
				<div>{{ item.divisorName }}</div>
				<div>{{item.names}}</div>
				<div>{{ item.divisorScore }}</div>
			</div>
		</div>
		<div class="fontWeightStyle">6.结果解读及专业建议</div>
		<div style="color: #000;">6.1 总分解读 ({{ form.appraisalScore }}分)：</div>
		<div v-html="form.proposalSuggest"></div>
		<div style="color: #000;">6.2 十大因子解读</div>
		<div v-for="(item,index) in form.userAppraisalDivisorList">
			<div class="">6.2.{{index+1}} {{ item.divisorName }} ({{ item.divisorScore }}分)：</div>
			<div v-html="item.proposalSuggest"></div>
		</div>
		<div class="fontWeightStyle" style="font-size: 30rpx;margin: 20rpx 0;">温馨提示：</div>
		<div class="textIndetStyle">
			您的心理健康状况和您的生活习惯密切相关。在平时的生活中应注意多加锻炼，接触大自然，保持积极乐观，关注自身的身心健康。如果在日常生活中，您遇到了难以跨越的难题，心理困扰十分严重时，应及时寻求专业的心理帮助，可以到比较权威的心理咨询和治疗机构进行进一步的检查和诊断。
		</div>
		<div class="say">声明：</div>
		<div class="textIndetStyle">以上调查结论及建议只是基于您的问卷调查结果，可能会因未能收集您的更多信息导致报告结果与您的实际状态不完全相符，请根据您的具体情况加以取舍。</div>
	</div>
</template>

<script>
import { getUserAppraisal } from '@/api/member/index.js'
export default {
	data() {
		return {
			showData:[],
			appraisalDivisorList: [],
			form: {},
			chartData: {},
			opts: {
				color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'],
				padding: [15, 10, 0, 15],
				enableScroll: false,
				legend: {},
				xAxis: {
					disableGrid: true
				},
				yAxis: {
					gridType: 'dash',
					dashLength: 2
				},
				extra: {
					line: {
						type: 'straight',
						width: 2,
						activeType: 'hollow'
					}
				}
			},
			currentTime: '',
			palette: {},
			predivImage: '',
			showPrediv: false
		};
	},

	watch: {
		// 监听 detailId 变化
		detailId(newVal) {
			if (newVal) {
				this.getDetail(newVal)
			}
		},
		// 监听 appraisalId 变化
		appraisalId(newVal) {
			if (newVal) {
				this.getDetail(newVal)
			}
		}
	},
	mounted() {
		// 初始化加载数据
		if (this.detailId) {
			this.getDetail(this.detailId)
		}
	},
	props: ['detailId', 'appraisalId'],
	methods: {
		// 更新时间
		// updateTime() {
		// 	const now = new Date();
		// 	this.currentTime = `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}${now.getHours()}:${now.getMinutes()}`;
		// },
		// 生成绘制结构
		// generatePalette() {
		// 	// 基础样式
		// 	const baseStyles = {
		// 		container: {
		// 			width: '690rpx',
		// 			padding: '30rpx',
		// 			backgroundColor: '#ffffff',
		// 			borderRadius: '16rpx',
		// 			boxShadow: '0 4rpx 20rpx rgba(0,0,0,0.1)'
		// 		},
		// 		header: {
		// 			flexDirection: 'row',
		// 			alignItems: 'center',
		// 			paddingBottom: '30rpx',
		// 			borderBottom: '1rpx solid #eee'
		// 		},
		// 		logo: {
		// 			width: '80rpx',
		// 			height: '80rpx',
		// 			borderRadius: '8rpx',
		// 			marginRight: '20rpx'
		// 		},
		// 		title: {
		// 			fontSize: '40rpx',
		// 			fontWeight: 'bold',
		// 			color: '#333'
		// 		},
		// 		card: {
		// 			marginTop: '30rpx',
		// 			padding: '20rpx',
		// 			backgroundColor: '#f9f9f9',
		// 			borderRadius: '12rpx'
		// 		},
		// 		cardTitle: {
		// 			fontSize: '32rpx',
		// 			fontWeight: 'bold',
		// 			color: '#1a1a1a',
		// 			marginBottom: '15rpx'
		// 		},
		// 		cardContent: {
		// 			fontSize: '28rpx',
		// 			color: '#666',
		// 			lineHeight: '40rpx',
		// 			marginBottom: '20rpx'
		// 		},
		// 		cardImage: {
		// 			width: '630rpx',
		// 			height: '350rpx',
		// 			borderRadius: '8rpx'
		// 		},
		// 		footer: {
		// 			marginTop: '30rpx',
		// 			paddingTop: '20rpx',
		// 			borderTop: '1rpx solid #eee',
		// 			fontSize: '26rpx',
		// 			color: '#999',
		// 			textAlign: 'center'
		// 		}
		// 	};
		// 	// 构建视图结构
		// 	const divs = [
		// 		// 背景容器
		// 		{
		// 			type: 'div',
		// 			css: {
		// 				...baseStyles.container,
		// 				background: 'linear-gradient(to bottom, #f8f9ff, #ffffff)'
		// 			},
		// 			children: [
		// 				// 头部
		// 				{
		// 					type: 'div',
		// 					css: baseStyles.header,
		// 					children: [
		// 						{
		// 							type: 'image',
		// 							src: '/static/logo.png',
		// 							css: baseStyles.logo
		// 						},
		// 						{
		// 							type: 'text',
		// 							text: '动态内容报告',
		// 							css: baseStyles.title
		// 						}
		// 					]
		// 				},
		// 				// 动态生成卡片 .
		// 				// this.dataList.map((item) => ({
		// 				// 	type: 'div',
		// 				// 	css: baseStyles.card,
		// 				// 	children: [
		// 				// 		// 标题
		// 				// 		{
		// 				// 			type: 'text',
		// 				// 			text: item.title,
		// 				// 			css: baseStyles.cardTitle
		// 				// 		},
		// 				// 		// 内容
		// 				// 		{
		// 				// 			type: 'text',
		// 				// 			text: item.content,
		// 				// 			css: baseStyles.cardContent
		// 				// 		},
		// 				// 		// 图片（如果有）
		// 				// 		...(item.image ? [{
		// 				// 			type: 'image',
		// 				// 			src: item.image,
		// 				// 			css: baseStyles.cardImage
		// 				// 		}] : [])
		// 				// 	]
		// 				// })),
		// 				// 底部
		// 				{
		// 					type: 'div',
		// 					css: baseStyles.footer,
		// 					children: [
		// 						{
		// 							type: 'text',
		// 							text: `生成时间：${this.currentTime}`,
		// 							css: {}
		// 						}
		// 					]
		// 				}
		// 			]
		// 		}
		// 	];

		// 	return {
		// 		width: '750rpx',
		// 		height: 'auto', // 关键：高度自动计算
		// 		divs: divs,
		// 		background: '#f5f7fa'
		// 	};
		// },
		// // 生成图片
		// async generateImage() {
		// 	uni.showLoading({
		// 		title: '生成中...',
		// 		mask: true
		// 	});

		// 	try {
		// 		this.updateTime();
		// 		this.palette = this.generatePalette();

		// 		await this.$nextTick(); // 调用 Painter 生成图片
		// 		if (this.$refs.painter && this.$refs.painter.canvasToTempFilePathSync) {
		// 			this.$refs.painter.canvasToTempFilePathSync({
		// 				fileType: 'png',
		// 				quality: 1,
		// 				success: (res) => {
		// 					uni.hideLoading();
		// 					this.uploadImage(res.tempFilePath);
		// 				},
		// 				fail: (err) => {
		// 					uni.hideLoading();
		// 					uni.showToast({
		// 						title: '生成失败',
		// 						icon: 'none'
		// 					});
		// 					console.error('生成图片失败', err);
		// 				}
		// 			});
		// 		} else {
		// 			console.error('Painter 组件未正确初始化');
		// 		}
		// 	} catch (e) {
		// 		uni.hideLoading();
		// 		uni.showToast({
		// 			title: '生成异常',
		// 			icon: 'none'
		// 		});
		// 		console.error('生成图片异常', e);
		// 	}
		// },

		// // 图片生成成功回调
		// async onImgOK(e) {
		// 	uni.hideLoading();

		// 	if (e.detail.path) {
		// 		this.predivImage = e.detail.path;
		// 		this.showPrediv = true;

		// 		// 自动保存到相册（可选）
		// 		// await this.saveImage();
		// 	} else {
		// 		uni.showToast({
		// 			title: '生成失败，无图片路径',
		// 			icon: 'none'
		// 		});
		// 	}
		// },

		// // 图片生成失败回调
		// onImgErr(err) {
		// 	uni.hideLoading();
		// 	console.error('图片生成失败', err);
		// 	uni.showToast({
		// 		title: '图片生成失败',
		// 		icon: 'none'
		// 	});
		// },

		// // 保存图片到相册
		// async saveImage() {
		// 	if (!this.predivImage) return;

		// 	uni.showLoading({
		// 		title: '保存中...'
		// 	});

		// 	try {
		// 		await uni.saveImageToPhotosAlbum({
		// 			filePath: this.predivImage
		// 		});

		// 		uni.hideLoading();
		// 		uni.showToast({
		// 			title: '保存成功'
		// 		});
		// 	} catch (e) {
		// 		uni.hideLoading();
		// 		console.error('保存失败', e);

		// 		// 处理权限问题
		// 		if (e.errMsg.includes('auth')) {
		// 			uni.showModal({
		// 				title: '提示',
		// 				content: '需要相册权限才能保存图片',
		// 				success: (res) => {
		// 					if (res.confirm) {
		// 						uni.openSetting();
		// 					}
		// 				}
		// 			});
		// 		} else {
		// 			uni.showToast({
		// 				title: '保存失败: ' + e.errMsg,
		// 				icon: 'none'
		// 			});
		// 		}
		// 	}
		// },
		getSplitParts(rawContent) {
			const delimiter = '------------';
			// const delimiter = '<p>------------</p>'; // 或使用正则表达式匹配变体
			return rawContent.split(new RegExp(delimiter.replace(/([.*+?^=!:${}()|$$$$\/\\])/g, '\\$1'), 'g'));
		},
		getDetail(id) {
			getUserAppraisal(id).then((res) => {
				this.form = res.data;
				this.form.userAppraisalDivisorList.forEach(element => {
					element.names = "1-1.5"
				});
				this.showData = [...[{divisorName:'各因子名称',divisorScore:'各因子测评得分',names:'各因子正常范围'}],...this.form.userAppraisalDivisorList]
			});
		},
		getServerData() {
			//模拟从服务器获取数据时的延时
			setTimeout(() => {
				//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
				let res = {
					categories: ['2018', '2019', '2020', '2021', '2022', '2023'],
					series: [
						{
							name: '成交量A',
							data: [35, 8, 25, 37, 4, 20]
						},
						{
							name: '成交量B',
							data: [70, 40, 65, 100, 44, 68]
						},
						{
							name: '成交量C',
							data: [100, 80, 95, 150, 112, 132]
						}
					]
				};
				this.chartData = JSON.parse(JSON.stringify(res));
			}, 500);
		}
	},
	onReady() {
		this.getServerData();
	}
};
</script>

<style lang="scss" scoped>
.charts-box {
	width: 100%;
	height: 200px;
}

.table {
	width: 100%;
	border: 1px solid #000;
	border-bottom: none;
	margin: 10px 0;

	>div {
		width: 100%;
		display: flex;
		border-bottom: 1px solid #000;
		height: 25px;
		line-height: 25px;

		>div {
			width: 50%;
			text-align: center;
			height: 25px;
			line-height: 25px;
		}

		>div:nth-child(1) {
			border-right: 1px solid #000;
		}
		>div:nth-child(2) {
			border-right: 1px solid #000;
		}
	}
}
</style>
